import { CSSTransition } from 'react-transition-group';
import { memo, useState } from 'react';
import { useMemoizedFn } from 'ahooks';
import { Button } from 'antd';

const Index: React.FC = () => {
  const [show, setShow] = useState<boolean>(true);

  const handleTest = useMemoizedFn(() => {
    setShow(!show);
  });

  return (
    <div>
      <div className={'square-wrapper'}>
        <CSSTransition
          in={show}
          timeout={500}
          classNames={'fade'}
          unmountOnExit={true}
        >
          <div
            className={'square'}
            style={{
              backgroundColor: 'red',
              width: '100px',
              height: '100px',
            }}
          />
        </CSSTransition>
      </div>
      <Button onClick={handleTest}>toggle</Button>
    </div>
  );
};
export default memo(Index);
